<!-- 订单 -->
<template>
    <div id="order">
        <!-- 头部 -->
        <div class="orderheader">
            <div class="orderheader0">
                <div class="orderheader1">
                    <div class="orderhch">
                        <h4>沃尔玛-秦淮店</h4>&nbsp;
                        <i class="fa fa-angle-right"></i>
                    </div>
                    <div class="ordertime">今天14:21</div>
                </div>
                <div class="orderheader2">进行中</div>
            </div>   
        </div>
        <!-- 主体 -->
        <div class="orderMain">
            <!-- 配送情况 -->
            <div class="orderMain1">
                <div>
                    <div class="orderPerson">配送员已取货</div>
                    <div class="beginOrder">开始为您配送，配送员:李祥才</div>
                </div>
                <div class="orderPhone">
                    <i class="fa fa-phone-square" style="font-size:2rem;color:green"></i>
                </div>
            </div>
            <!-- 配送内容 -->
            <div class="ordercontent">
                <img src="/static/o1.jpg">
                <img src="/static/o2.jpg">
                <img src="/static/o3.jpg">
                <img src="/static/o4.jpg">
               <i class="fa fa-ellipsis-h" style="font-size:2rem;color:#999;line-height:3rem"></i>
               <div class="orderPrice">
                   <p class="orderPrice1">￥72.5</p>
                   <p class="orderCount">共10件</p>
                   <p class="orderdada">达达专送</p>
               </div>
            </div>
            <!-- 中间横线 -->
            <hr/>
            <div class="orders2">
                <!-- 第二个订单的头部 -->
                <div class="orderheader">
                    <div class="orderheader0">
                        <div class="orderheader1">
                            <div class="orderhch">
                                <h4>益丰-洪武路</h4>&nbsp;
                                <i class="fa fa-angle-right"></i>
                            </div>
                            <div class="ordertime">2018-09-20</div>
                        </div>
                        <div class="orderheader2 orderheader3">已完成</div>
                    </div>   
                </div>
                <!-- 第二个订单的内容 -->
                <div class="ordercontent">
                    <img src="/static/o1.jpg">
                    <img src="/static/o2.jpg">
                    <img src="/static/o3.jpg">
                    <img src="/static/o4.jpg">
                    <i class="fa fa-ellipsis-h" style="font-size:2rem;color:#999;line-height:3rem"></i>
                    <div class="orderPrice">
                        <p class="orderPrice1">￥72.5</p>
                        <p class="orderCount">共10件</p>
                        <p class="orderdada">达达专送</p>
                    </div>
                </div>
                <div class="orderAgin">
                    <div>去评价</div>
                    <div>再次购买</div>
                </div>
            </div> 
             <!-- 中间横线 -->
            <hr/>
            <div class="orders2">
                <!-- 第二个订单的头部 -->
                <div class="orderheader">
                    <div class="orderheader0">
                        <div class="orderheader1">
                            <div class="orderhch">
                                <h4>永辉-中山路</h4>&nbsp;
                                <i class="fa fa-angle-right"></i>
                            </div>
                            <div class="ordertime">2018-08-12</div>
                        </div>
                        <div class="orderheader2 orderheader3">已完成</div>
                    </div>   
                </div>
                <!-- 第二个订单的内容 -->
                <div class="ordercontent">
                    <img src="/static/o1.jpg">
                    <img src="/static/o2.jpg">
                    <img src="/static/o3.jpg">
                    <img src="/static/o4.jpg">
                    <i class="fa fa-ellipsis-h" style="font-size:2rem;color:#999;line-height:3rem"></i>
                    <div class="orderPrice">
                        <p class="orderPrice1">￥99.9</p>
                        <p class="orderCount">共10件</p>
                        <p class="orderdada">达达专送</p>
                    </div>
                </div>
                <div class="orderAgin">
                    <div>去评价</div>
                    <div>再次购买</div>
                </div>
            </div> 
              <!-- 中间横线 -->
            <hr/>
            <div class="orders2 orderlist">
                <!-- 第二个订单的头部 -->
                <div class="orderheader">
                    <div class="orderheader0">
                        <div class="orderheader1">
                            <div class="orderhch">
                                <h4>苏果-秦淮区</h4>&nbsp;
                                <i class="fa fa-angle-right"></i>
                            </div>
                            <div class="ordertime">2018-09-20</div>
                        </div>
                        <div class="orderheader2 orderheader3">已完成</div>
                    </div>   
                </div>
                <!-- 第二个订单的内容 -->
                <div class="ordercontent">
                    <img src="/static/o1.jpg">
                    <img src="/static/o2.jpg">
                    <img src="/static/o3.jpg">
                    <img src="/static/o4.jpg">
                    <i class="fa fa-ellipsis-h" style="font-size:2rem;color:#999;line-height:3rem"></i>
                    <div class="orderPrice">
                        <p class="orderPrice1">￥102.5</p>
                        <p class="orderCount">共7件</p>
                        <p class="orderdada">达达专送</p>
                    </div>
                </div>
                <div class="orderAgin">
                    <div>去评价</div>
                    <div>再次购买</div>
                </div>
            </div>
        </div>
        <bnav active="order"></bnav>
    </div>
</template>
<script>
import bnav from "@/components/Bnav.vue";
export default {
  components: {
    bnav
  }
};
</script>
<style>
.orderheader {
  width: 100%;
  height: 3rem;
  /* border: 1px solid red; */
}
.orderheader0 {
  width: 94%;
  height: 3rem;
  display: flex;
  margin: 0.3rem auto;
  justify-content: space-between;
}
.orderhch {
  display: flex;
}
.orderhch h4 {
  font-size: 0.95rem;
}
.orderhch i {
  font-size: 1.2rem;
  color: #333;
}
.ordertime {
  color: #999;
  font-size: 0.6rem;
}
.orderheader2 {
  color: green;
  font-size: 0.87rem;
}
.orderMain {
  width: 94%;
  height: 3rem;
  margin: 0 auto;
  background-color: #f9f9f9;
}
.orderMain1 {
  width: 92%;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.orderPerson {
  font-size: 0.95rem;
  color: #333;
}
.beginOrder {
  font-size: 0.7rem;
  color: #999;
}
.orderPhone {
  line-height: 3rem;
}
.ordercontent {
  width: 98%;
  height: 4rem;
  margin: 1rem auto;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-between;
}
.ordercontent img {
  width: 2.7rem;
  height: 2.7rem;
}
.orderPrice {
  height: 4rem;
  width: 4rem;
  /* border: 1px solid red; */
  font-size: 0.87rem;
}
.orderPrice1 {
  color: red;
  text-align: right;
}
.orderCount {
  color: #999;
  text-align: right;
}
.orderdada {
  width: 4rem;
  height: 1.4rem;
  border: 0.05rem solid rgb(36, 119, 197);
  color: rgb(36, 119, 197);
  text-align: center;
}
.orders2 {
  /* border: 1px solid red; */
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.orderAgin {
  width: 9rem;
  height: 2rem;
  line-height: 2rem;
  display: flex;
  justify-content: space-between;
  margin-left: 9.4rem;
  font-size: 0.78rem;
}
.orderAgin div {
  border: 0.05rem solid #999;
  padding: 0 0.5rem;
}
.orderlist{
    margin-bottom:4rem;
}
.orderheader3{
    color:#333;
}
</style>


